<template>
  <el-dialog :title="$t('tool.rightMenu.' + title)" :visible.sync="dialogFormVisible" custom-class="jtyj-dialog"
    :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-position="top">
      <el-row :gutter="20">

        <el-col :span="8">
          <el-form-item :label="$t('tool.experimentDesign.experimentName')" prop="experimentName">
            <el-input v-model="form.experimentName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.experimentDesign.experimentDifficulty')" prop="experimentDifficulty">
            <el-select v-model="form.experimentDifficulty" class="jtyj-input"
              :placeholder="$t('tool.others.placehoderSelect')">
              <el-option label="容易" value="1"></el-option>
              <el-option label="中等" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.experimentDesign.selectScenario')" prop="selectScenario">
            <el-button class="jtyj-btn-cancel" @click="openSelectScenarioDialog">点击选择</el-button>
            <div v-if="form.scenarioSource">
              <el-tag>{{ form.scenarioNames.length != 0 ? form.scenarioNames: form.scenarioPaths }}_({{ form.scenarioSource }}) </el-tag>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="$t('tool.experimentDesign.experimentDescribe')" prop="experimentDescribe">
            <el-input type="textarea" v-model="form.experimentDescribe" autocomplete="off" class="jtyj-input"
              :placeholder="$t('tool.others.placehoderInput')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="jtyj-btn-cancel" @click="cancel">{{
        $t("setup.buttonText.cancel")
      }}</el-button>
      <el-button class="jtyj-btn-primary" @click="submitForm">{{
        $t("setup.buttonText.save")
      }}</el-button>
    </div>

    <SelectScenarioDialog ref="selectScenarioDialog"  @change="handelScenarioChange"></SelectScenarioDialog>
    
  </el-dialog>
</template>

<script>
import {
  addModel,
  addGlobalData,
  updateModel,
  updateGlobalData,
  addModelFolder,
  updateModelFolder,
  addModelData,
  updateModelData,
} from "@/api/myspace/model-manage-tool/model-manage";
import { mapState } from "vuex";
import SelectScenarioDialog from "./select-scenario-dialog.vue";
export default {
  data() {
    return {
      title: "newExperiment",
      dialogFormVisible: false,
      form: {
        userId: null,
        experimentName: null,
        experimentDifficulty: null,
        experimentDescribe: null,
        scenarioIds:[],
        scenarioNames:[],
        scenarioPaths:[],
        scenarioSource: null,
        parentId: 0,
        nodeType: 1,
      },
      treeData: [],
      rules: {
        experimentName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        experimentDifficulty: [{ required: true, message: "请选择难度", trigger: "blur" }],
        experimentDescribe: [{ required: true, message: "请输入描述", trigger: "blur" }],
      },
    };
  },

  components: { SelectScenarioDialog },
  computed: {
    ...mapState({
      userId: (state) => state.user.id,
    }),
  },
  mounted() {
  },
  methods: {
    init(sign, node) {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        if (sign == "add") {
          this.title = "newExperiment";
          this.form.parentId = node ? node.id : 0
        } else {
          this.title = "edit";
          this.form.parentId = node.parentId;
          this.form.experimentName = node.name;
          this.form.experimentDifficulty = node.difficulty;
          this.form.experimentDescribe = node.describe;
        }
      });
    },

    cancel() {
      this.dialogFormVisible = false;
    },

    // 打开想定选择弹窗
    openSelectScenarioDialog(){
      this.$refs.selectScenarioDialog.dialogVisible = true
    },

    // 处理想定选择改变
    handelScenarioChange(scenarioSource, scenarioIds, scenarioNames, scenarioPaths){
      console.log("想定改变");
      this.form.scenarioSource = scenarioSource;
      this.form.scenarioIds = scenarioIds;
      this.form.scenarioNames = scenarioNames;
      this.form.scenarioPaths = scenarioPaths;
    },
    // 表单提交
    submitForm() {
      this.form.userId = this.userId;
      this.$refs["form"].validate((valid) => {
        console.log('valid', valid);

        if (valid) {
          if (this.form.modelId == null) {
            addModel(this.form).then((response) => {
              if (response.code == 200) {
                this.$message.success(
                  this.$toolHandle.getI18nName(
                    this.$zh.setup.responseText,
                    this.$en.setup.responseText,
                    this.$i18n.locale,
                    "success"
                  )
                );
                this.$emit("refresh");
                this.dialogFormVisible = false;
              }
            });
          } else {
            updateModel(this.form).then((response) => {
              if (response.code == 200) {
                this.$message.success(
                  this.$toolHandle.getI18nName(
                    this.$zh.setup.responseText,
                    this.$en.setup.responseText,
                    this.$i18n.locale,
                    "success"
                  )
                );
                this.$emit("refresh");
                this.dialogFormVisible = false;
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.jtyj-input {
  width: 100%;
}
</style>